<template>
  <view class="x-preview">
    <x-box bgColor="#ffffff" :title="props.title">
      <view slot="title" class="x-row">
        <slot name="icon">
          <image :src="props.icon" v-if="props.icon"></image>
        </slot>
        <view class="title">
          <slot name="title">{{props.title}}</slot>
        </view>
      </view>
      <view slot="tools"><slot name="tools"></slot></view>
      <view class="body" @tap="onClick">
        <template v-for="(c, index) in props.columns">
          <view v-if="show(c, index)" class="item"
                :class="{'x-row': props.mode == 'row', 'x-space-between': props.mode == 'space-between'}"
                :key="index">
            <view class="x-label">{{c.label}}<text v-if="props.mode == 'row'">：</text></view>

            <!-- #ifdef MP -->
            <!--          <slot :name="props.columns[index].field"><view>{{getValue(c)}}</view></slot>-->
            <slot :name="c.field" />
            <view class="x-value" v-if="!$slots[c.field]">{{getValue(c)}}</view>
            <!-- #endif -->

            <!-- #ifdef H5 || APP-PLUS  -->
            <slot :name="c.field">
              <view class="x-value">{{getValue(c)}}</view>
            </slot>
            <!-- #endif -->
          </view>
        </template>
        <slot name="desc"></slot>
      </view>
      <view class="bottom">
        <slot name="bottom"></slot>
      </view>
    </x-box>
  </view>
</template>

<script setup>
import XBox from '@/components/lib/box'
const props = defineProps({
  data: {
    type: Object,
    default: () => {
      return {}
    }
  },

  icon: String,

  title: String,

  /**
   * 数据项 label field
   */
  columns: {
    type: Array,
    default: () => {
      return []
    }
  },

  check: {
    type: Function,
  },

  /**
   * 模式 row space-between
   */
  mode: {
    type: String,
    default: "space-between"
  },
})

import Helper from "@/core/helper"

const getValue = (c) => {
  if(! Helper.empty(c.format)) {
    return c.format(c, props.data);
  }
  let value = Helper.getValueByJson(props.data, c.field);
  value = Helper.empty(value) ? c.value : value;
  value = Helper.empty(value) ? '-' : value;
  return Helper.empty(c.suffix) ? value : value + c.suffix;
}

/**
 * 因为uni-app屏蔽对象中的function，所以采用通过check方法，返回字段自行判断是否显示
 * @param {Object} c
 */
const show = (c, index) => {
  if (props.check) {
    return props.check(c, props.data, index);
  }

  return true;
}

const emit = defineEmits(['click, leftSwipe, rightSwipe'])

const onClick = () => {
  emit('click', props.data);
}
</script>

<style lang="less">
.x-preview {
  background-color: #fff;

  .body {
    width: 100%;
    padding: 20rpx;
    box-sizing: border-box;

    .item {
      padding: 10rpx;
      box-sizing: border-box;

      .value {
        font-size: 28rpx;
        color: #666;
        font-weight: 500;
      }
    }
  }

  .bottom:not(:empty) {
    width: 100%;
    padding: 20rpx;
    box-sizing: border-box;
    border-top: 1px solid #e9e9e9;
  }
}
</style>
